<template>
  <div class="app-container pagePublic">
    <!--label-position:label对齐方式,inline行内表单-->
    <el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
      <el-form-item label="订单名称">
        <el-input v-model="searchForm.orderName" placeholder="请输入订单名称" />
      </el-form-item>
      <el-form-item label="订单时间段">
        <el-date-picker
          v-model="searchForm.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="接单员姓名">
        <el-input v-model="searchForm.personName" placeholder="请输入接单员姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        :height="tableHeight"
      >
        <el-table-column label="序号" align="center" width="80" type="index" />
        <el-table-column label="订单名称" align="center" property="orderName" show-overflow-tooltip />
        <el-table-column label="订单地址" align="center" property="orderAddress" show-overflow-tooltip />
        <el-table-column label="所属客户" align="center" property="companyName" show-overflow-tooltip />
        <el-table-column label="接单人员" align="center" property="clUserName" show-overflow-tooltip />
        <el-table-column label="建筑面积" align="center" property="areas" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.areas">{{ scope.row.areas }}m²</span>
            <span v-else ></span>
          </template>
        </el-table-column>
        <el-table-column label="订单简介" align="center" property="remark" show-overflow-tooltip />
        <el-table-column label="订单工期" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.beginTime!=null">{{ scope.row.beginTime }}-{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="延期订单日期" align="center" property="extensionEndTime" show-overflow-tooltip width="120" >
          <template slot-scope="scope">
            <span style="color:#41b7de">{{ scope.row.extensionEndTime }}</span>
          </template>
        </el-table-column>
         <el-table-column label="延期原因" align="center" property="extensionRemark" show-overflow-tooltip >
          <template slot-scope="scope">
            <span style="color:#41b7de">{{ scope.row.extensionRemark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="签约金额" align="center" property="commission" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.commission }}元</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" property="ctime" show-overflow-tooltip />
        <el-table-column label="订单备注" align="center" property="comment" show-overflow-tooltip />
        <el-table-column label="订单图片" align="center" width="230">
          <template slot-scope="scope">
            <div v-if="scope.row.iocn ==''||scope.row.iocn ==null">
              <img
                src="../../../static/img/noData.jpg"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"
              >
            </div>
            <div
              v-for="(item,index) in scope.row.iocn.split(',')"
              v-else-if="scope.row.iocn !=''||scope.row.iocn !=null"
              :key="index"
              style="display: inline-block;float: inside"
            >
              <img :src="$store.state.apiUrl+'file/'+item" style=" width: 60px;height: 60px;margin:0px 5px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <div v-if="row.attas">
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="handleAdopt(row)">通过</el-button>
                <el-button size="mini" type="danger" @click="handleReject(row)">驳回</el-button>
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
              </div>
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
                <el-button size="mini" type="success" @click="seeEnclosure(row)">附件</el-button>
              </div>
            </div>
            <div v-else>
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="handleAdopt(row)">通过</el-button>
                <el-button size="mini" type="danger" @click="handleReject(row)">驳回</el-button>
              </div>
              <div style="margin:5px;">
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />

    <!--驳回-->
    <el-dialog
      title="审核驳回订单"
      :visible.sync="rejectFormVisible"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelReject"
      class="dialogPublic"
    >
      <el-form ref="rejectForm" :rules="rulesReject" :model="rejectForm" class="formPublic">
        <el-form-item label="驳回备注:" prop="rejectRemark">
          <el-input v-model="rejectForm.rejectRemark" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入驳回备注" style="width:216px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveReject">保存</el-button>
        <el-button @click="cancelReject">取消</el-button>
      </div>
    </el-dialog>

    <!--订单备注-->
    <el-dialog
      title="订单备注"
      :visible.sync="remarkFormVisible"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelRemark"
      class="dialogPublic"
    >
      <el-form ref="remarkForm" :model="remarkForm" class="formPublic">
        <el-form-item label="订单备注:" prop="orderRemark">
          <el-input v-model="remarkForm.orderRemark" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入订单备注" style="width:216px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveRemark">保存</el-button>
        <el-button @click="cancelRemark">取消</el-button>
      </div>
    </el-dialog>
   
    <!-- 附件 -->
    <yulan v-if="showEnclosure" :enclosre="enclosreTable" @closeEnclosure="closeEnclosure" />

    <!-- 详情 -->
    <el-dialog
    :visible.sync="showDetail"
    width="60%"
    center
    :before-close="detailClose"
    >
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="订单基本信息" name="first" >
        <el-form ref="dialogForm"  :model="detailForm" class="formPublic" style="display: flex">
          <div style="width:45%;display: inline-block;">
            <el-form-item prop="orderName" label="订单名称:">
              <span>{{ detailForm.orderName }}</span>
            </el-form-item>
            <el-form-item prop="orderAddr" label="订单地址:">
              <span>{{ detailForm.orderAddr }}</span>
            </el-form-item>
            <el-form-item label="所属客户:" prop="orderClient">
              <span>{{ detailForm.orderClient }}</span>
            </el-form-item>
            <el-form-item label="开始日期:" prop="startDate">
              <span>{{ detailForm.startDate }}</span>
            </el-form-item>
            <el-form-item label="结束日期:" prop="endDate">
              <span>{{ detailForm.endDate }}</span>
            </el-form-item>
            <el-form-item label="签约金额:" prop="commission">
              <span v-if=" detailForm.commission">{{ detailForm.commission }}元</span>
              <span v-else>0元</span>
            </el-form-item>
            <el-form-item label="结算金额:" prop="settleAmount">
              <span v-if="detailForm.settleAmount">{{ detailForm.settleAmount }}元</span>
              <span v-else>0元</span>
            </el-form-item>
            <el-form-item label="订单简介:" prop="orderRemark" style="display: flex">
              <el-input
                v-model="detailForm.orderRemark"
                type="textarea"
                placeholder="订单简介"
                :disabled="true"
                :autosize="{ minRows: 1, maxRows: 4}"
              />
            </el-form-item>
            <el-form-item label="接单人员:" prop="orderClerk">
              <span>{{ detailForm.orderClerk }}</span>
            </el-form-item>
            <el-form-item prop="buildArea" label="建筑面积:">
              <span v-if="detailForm.buildArea">{{ detailForm.buildArea}}m²</span>
              <span v-else></span>
            </el-form-item>
          </div>
          <div v-if="detailForm.orderPhoto.length>0" style="width: 45%">
            <img v-for="(item ,index) in detailForm.orderPhoto" :key="index" width="30%" :src="item" alt="">
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="订单记录" name="second" >
        <div style="min-height: 400px">
          <div>
            <h4>审核通过记录</h4>
            <header class="passhe">
              <span style="flex: 2">审核时间</span>
              <span style="flex: 3">订单评分</span>
              <span style="flex: 5">审核备注</span>
            </header>
            <div v-for="(item,index) in passorder" :key="index" class="pass">
              <span style="flex: 2">{{ item.ctime }}</span>
              <span style="flex: 3">
                <el-rate
                  v-model="star"
                  disabled
                  :colors="colors"
                />
              </span>
              <span style="flex: 5">{{ item.remark }}</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <h4>订单驳回记录</h4>
            <header class="passhe">
              <span style="flex: 1">序号</span>
              <span style="flex:2">驳回状态</span>
              <span style="flex: 3">驳回时间</span>
              <span style="flex: 6">驳回备注</span>
            </header>
            <div v-for="(item,index) in refusedorder" :key="index" class="pass">
              <span style="flex: 1">{{ index+1 }}</span>
              <span style="flex: 2" v-if="item.type==1&&item.status==2">审核驳回</span>
              <span style="flex: 2" v-if="item.type==3">延期驳回</span>
                <span style="flex: 3">
                  {{ item.ctime }}
                </span>
              <span style="flex: 6">{{ item.remark }}</span>
            </div>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import yulan from '../../../static/component/yulan'
import { orderList, orderYanqi,saveOrderRemark,hisquery} from '@/api/article'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination, yulan },
  props: ['orderStatus'],
  data() {
    return {
    /** **********订单详情*********/
      showDetail:false,//订单详情弹出      
      detailForm: {
        orderId: '', // 订单id
        orderName: '', // 订单名称
        orderAddr: '', // 订单地址
        orderClient: '', // 所属客户
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        commission: '', // 佣金
        settleAmount:'',//结算金额
        orderRemark: '', // 订单简介
        orderClerk: '', // 接单人员
        buildArea: '', // 建筑面积
        orderPhoto: [], // 订单照片
        fileList: [], // 附件
        ctime: ''
      },
      passorder: [],
      refusedorder: [],
      star: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      tabName:'first',
      /** **********订单详情结束*********/
      /** **********订单备注**********/
      remarkFormVisible: false,
      remarkForm: {
        orderId: '',
        orderRemark: ''// 订单备注
      },
      /** **********订单备注结束**********/
      /** **********附件*********/
      showEnclosure: false, // 是否显示附件列表
      enclosreTable: [], // 附件列表数组
      /** **********附件结束**********/
      labelPosition: 'right', // el-form的label对齐方式
      /** **********查询**********/
      searchForm: {
        orderName: '', // 订单名称
        time: [], // 时间
        personName: ''// 接单员
      },
      /** **********查询结束**********/
      /** **********table**********/
      tableList: [], // 页面table数据
      listLoading: true, // 加载
      tableHeight: window.screen.availHeight - 380, // table高度
      tableKey: 0,
      /** **********table结束**********/
      /** **********分页**********/
      total: 0,
      page: 1,
      limit: 10,
      /** **********分页结束**********/
      /** **************驳回****************/
      rejectFormVisible: false,
      rejectForm: {
        orderId: '', // 订单id
        rejectRemark: ''// 驳回备注
      },
      rulesReject: {
        rejectRemark: [
          { required: true, message: '请填写驳回备注', trigger: 'blur' }
        ]
      }
      /** **************驳回结束****************/
    }
  },
  created() {

  },
  mounted() {
    console.log('延期申请', this.orderStatus)
    this.getList()
  },
  methods: {
  /** **********订单详情*************/
    detailClose() {
      this.showDetail = false
    },
    opendetail(item) {
      this.tabName='first'
      this.showDetail = true
      this.detailForm = {
        orderId: item.id, // 订单id
        orderName: item.orderName, // 订单名称
        orderAddr: item.orderAddress, // 订单地址
        orderClient: item.companyName, // 所属客户
        startDate: item.beginTime, // 开始日期
        endDate: item.endTime, // 结束日期
        commission: item.commission, // 签约金额
        settleAmount:item.settleAmount,//结算金额
        orderRemark: item.remark, // 订单简介
        orderClerk: item.clUserNames, // 接单人员
        buildArea: item.areas, // 建筑面积
        orderPhoto: (item.iocn == null || item.iocn == '') ? [] : item.iocn.split(','), // 订单照片
        fileList: (item.attas == null || item.attas == '') ? [] : JSON.parse(item.attas), // 附件
        ctime: item.ctime
      }
      
      hisquery({
        id:item.id,
        type:''
      }).then(res => {
        if (res.code == 1) {
          const passorder = []
          const refusedorder = []
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].type == 1&&res.data[i].status==1) {
                passorder.push(res.data[i])
              } if((res.data[i].type == 1&&res.data[i].status==2)||res.data[i].type == 3) {
                refusedorder.push(res.data[i])
              }
            }
            this.passorder = passorder
            this.refusedorder = refusedorder
            if (this.passorder.length > 0) {
              this.star = this.passorder[0].assess
            } else {
              this.star = null
            }
          }
        } else {

        }
      })
    },
    /** **********订单详情结束*************/
    //* ****************订单备注***************8*/
    handleRemark(row) { // 弹出
      this.remarkForm = {
        orderId: row.id,
        orderRemark: row.comment
      }
      this.remarkFormVisible = true
    },
    cancelRemark() { // 取消
      this.remarkFormVisible = false
    },
    saveRemark() { // 保存
      saveOrderRemark({
        id:this.remarkForm.orderId,
        comment:this.remarkForm.orderRemark
      }).then(res =>{
        if(res.code==1){
          this.$message({
            type:'success',
            message:'订单备注保存成功'
          })
          this.remarkFormVisible = false;
          this.getList()
        }
      }).catch({})
    },
    //* ****************订单备注结束***************8*/
    /** **************附件***************/
    seeEnclosure(row) {
      this.showEnclosure = true
      this.enclosreTable = JSON.parse(row.attas)
    },
    closeEnclosure() {
      this.showEnclosure = false
    },
    /** **************附件结束***************/
    /** **************查询***************/
    getList() {
      this.listLoading = true
      orderList({
        // status:5,//待审核订单
        status: this.orderStatus,
        orderName: this.searchForm.orderName == '' ? null : this.searchForm.orderName, // 订单名称
        clUserName: this.searchForm.personName == '' ? null : this.searchForm.personName, // 接单员名称
        beginTime: this.searchForm.time[0], // 开始时间
        endTime: this.searchForm.time[1], // 结束时间
        pageNum: this.page,
        pageSize: this.limit
      }).then(res => {
        if (res.code == 1) {
          this.tableList = res.data.list
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    /** **************查询结束***************/

    /** **************重置***************/
    reset() {
      this.page = 1
      this.limit = 10
      this.searchForm = {
        orderName: '', // 订单名称
        time: [], // 时间
        personName: ''// 接单员
      }
      this.getList()
    },
    /** **************重置结束***************/
    /** ***************通过***************/
    // 通过保存
    handleAdopt(row) {
      this.$confirm('是否确认通过订单' + row.orderName + '的延期申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderYanqi({
          sourceId: row.extensionId,
          type: 1
        }).then(res => {
          console.log(res)
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '通过延期申请成功'
            })
            this.reset()
          }
        })
      }).catch(() => {})
    },
    /** **************通过结束***************/
    /** **************驳回***************/
    handleReject(row) {
      this.rejectFormVisible = true
      this.rejectForm = {
        orderId: row.extensionId,
        rejectRemark: ''
      }
    },
    // 取消驳回
    cancelReject() {
      this.rejectFormVisible = false
      this.$refs.rejectForm.resetFields()
      this.$refs.rejectForm.clearValidate()
    },
    // 驳回保存
    saveReject() {
      this.$refs['rejectForm'].validate((valid) => {
        if (valid) {
          orderYanqi({
            type: 0,
            sourceId: this.rejectForm.orderId,
            remark: this.rejectForm.rejectRemark
          }).then(res => {
            if (res.code == 1) {
              setTimeout(() => {
                this.$message({
                  type: 'success',
                  message: '驳回成功'
                })
              }, 500)
              this.reset()
              this.cancelReject()
            }
          })
        }
      })
    }
    /** **************驳回结束***************/
  }
}
</script>
